<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 18px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 16px;
    margin: 0;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="{'read-only-form': readonly}">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="230px" class="flex-form">
        <el-form-item label="开户行：" prop="bankName">
          <el-input :disabled="readonly" v-model="form.bankName"></el-input>
        </el-form-item>
        <el-form-item label="银行代码：" prop="bankCode">
          <el-input :disabled="readonly" v-model="form.bankCode"></el-input>
        </el-form-item>
        <el-form-item label="银行账户：" prop="bankAccount">
          <el-input :disabled="readonly" v-model="form.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="银行户主：" prop="bankAccountOwner">
          <el-input :disabled="readonly" v-model="form.bankAccountOwner"></el-input>
        </el-form-item>
        <el-form-item label="开户行证明：" prop="bankFileName">
          <el-upload v-if="!readonly" class="upload-file" action="" multiple :limit="1" :auto-upload="false" ref="bankFile" :file-list="bankFileList"
            :on-preview="previewFile" :on-exceed="onExceed">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <el-button v-else type="text" @click="downloadFile(form.bankFileUrl, form.bankFileName)">{{form.bankFileName}}</el-button>
        </el-form-item>
        <el-form-item label="固定资产：" prop="assets">
          <el-input :disabled="readonly" v-model="form.assets"></el-input>
        </el-form-item>
        <el-form-item label="流动资金(万元)：" prop="cashFlow">
          <el-input :disabled="readonly" v-model="form.cashFlow"></el-input>
        </el-form-item>
        <el-form-item label="增值税发票税种：" prop="taxCategories">
          <el-select :disabled="readonly" v-model="form.taxCategories" style="width: 202px">
            <el-option v-for="item in taxCategoriesList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票最大额度(万元)：" prop="invoiceQuota">
          <el-input :disabled="readonly" v-model="form.invoiceQuota"></el-input>
        </el-form-item>
        <el-form-item label="资产负债表：" prop="liabilitiesFileName">
          <el-upload v-if="!readonly" class="upload-file" action="" multiple :limit="1" :auto-upload="false" ref="liabilitiesFile"
            :file-list="liabilitiesFileList" :on-preview="previewFile" :on-exceed="onExceed">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <el-button v-else type="text" @click="downloadFile(form.liabilitiesFileUrl, form.liabilitiesFileName)">{{form.liabilitiesFileName}}</el-button>
        </el-form-item>
        <el-form-item label="利润表：" prop="profitFileName">
          <el-upload v-if="!readonly" class="upload-file" action="" multiple :limit="1" :auto-upload="false" ref="profitFile" :file-list="profitFileList"
            :on-preview="previewFile" :on-exceed="onExceed">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <el-button v-else type="text" @click="downloadFile(form.profitFileUrl, form.profitFileName)">{{form.profitFileName}}</el-button>
        </el-form-item>
        <el-form-item label="现金流量表：" prop="cashFlowFileName">
          <el-upload v-if="!readonly" class="upload-file" action="" multiple :limit="1" :auto-upload="false" ref="cashFlowFile" :file-list="cashFlowFileList"
            :on-preview="previewFile" :on-exceed="onExceed">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <el-button v-else type="text" @click="downloadFile(form.cashFlowFileUrl, form.cashFlowFileName)">{{form.cashFlowFileName}}</el-button>
        </el-form-item>
        <div class="line"></div>
        <div class="title">近三年财务状况</div>
        <el-table :data="yearList" border style="margin: 16px">
          <el-table-column label="年度" prop="year" align="center"></el-table-column>
          <el-table-column label="资产总额" align="center">
            <template slot-scope="scope">
              <el-input :disabled="readonly" v-model="form['year' + scope.row.a + 'AssetsAmt']"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="净资产" align="center">
            <template slot-scope="scope">
              <el-input :disabled="readonly" v-model="form['year' + scope.row.a + 'NetAssets']"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="销售收入" align="center">
            <template slot-scope="scope">
              <el-input :disabled="readonly" v-model="form['year' + scope.row.a + 'ProfitRate']"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="利润率" align="center">
            <template slot-scope="scope">
              <el-input :disabled="readonly" v-model="form['year' + scope.row.a + 'CashInflow']"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="经营性现金净流入" align="center">
            <template slot-scope="scope">
              <el-input :disabled="readonly" v-model="form['year' + scope.row.a + 'SaleAmt']"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          bankName: '',
          bankCode: '',
          bankAccount: '',
          bankAccountOwner: '',
          assets: '',
          cashFlow: '',
          taxCategories: '',
          invoiceQuota: '',
          year1AssetsAmt: '',
          year2AssetsAmt: '',
          year3AssetsAmt: '',
          year1NetAssets: '',
          year2NetAssets: '',
          year3NetAssets: '',
          year1ProfitRate: '',
          year2ProfitRate: '',
          year3ProfitRate: '',
          year1CashInflow: '',
          year2CashInflow: '',
          year3CashInflow: '',
          year1SaleAmt: '',
          year2SaleAmt: '',
          year3SaleAmt: '',
          bankFileName: '',
          bankFileUrl: '',
          liabilitiesFileName: '',
          liabilitiesFileUrl: '',
          profitFileName: '',
          profitFileUrl: '',
          cashFlowFileName: '',
          cashFlowFileUrl: ''
        },
        bankFileList: [],
        liabilitiesFileList: [],
        profitFileList: [],
        cashFlowFileList: [],
        yearList: [],
        rules: {
          bankName: [{
            required: true,
            message: '请输入开户行',
            trigger: 'blur'
          }],
          bankCode: [{
            required: true,
            message: '请输入银行代码',
            trigger: 'blur'
          }],
          bankAccount: [{
            required: true,
            message: '请输入银行账户',
            trigger: 'blur'
          }],
          bankAccountOwner: [{
            required: true,
            message: '请输入银行户主',
            trigger: 'blur'
          }],
          assets: [{
            required: true,
            message: '请输入固定资产',
            trigger: 'blur'
          }],
          cashFlow: [{
            required: true,
            message: '请输入流动资金(万元)',
            trigger: 'blur'
          }],
          taxCategories: [{
            required: true,
            message: '请选择增值税发票税种',
            trigger: 'change'
          }],
          invoiceQuota: [{
            required: true,
            message: '请输入发票最大额度(万元)',
            trigger: 'blur'
          }],
          bankFileName: [{
            required: true,
            message: '请上传开户行证明',
            trigger: 'change'
          }],
          liabilitiesFileName: [{
            required: true,
            message: '请上传资产负债表',
            trigger: 'change'
          }],
          profitFileName: [{
            required: true,
            message: '请上传利润表',
            trigger: 'change'
          }],
          cashFlowFileName: [{
            required: true,
            message: '请上传现金流量表',
            trigger: 'change'
          }]
        },
        taxCategoriesList: []
      }
    },
    created() {
      let year = new Date().getFullYear();
      for (let i = 0; i < 3; i++) {
        this.yearList.push({
          a: i + 1,
          year: year - i
        });
      }

      this.getDicData('TAX_RATE').then((data) => {
        this.taxCategoriesList = data;
      });
    },
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onExceed(files, fileList){
        let f = {
          name: files[0].name,
          percentage: 0,
          raw: files[0],
          size: files[0].size,
          status: "ready",
          url: URL.createObjectURL(files[0])
        };
        fileList.splice(0, 1, f);
      },
      previewFile(file) {
        if (file.url.indexOf('blob:http') < 0) {
          this.downloadFile(file.url, file.name);
        }
      },
      initFile(data, prop) {
        if (data[prop + 'Url'] && data[prop + 'Url'] !== '') {
          this[prop + 'List'].push({
            name: data[prop + 'Name'],
            url: data[prop + 'Url']
          });
        }
      },
      initData(data) {
        for (let key in this.form) {
          this.form[key] = data[key];
        }
        this.initFile(data, 'bankFile');
        this.initFile(data, 'liabilitiesFile');
        this.initFile(data, 'profitFile');
        this.initFile(data, 'cashFlowFile');
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          this.form.bankFileName = '';
          this.form.liabilitiesFileName = '';
          this.form.profitFileName = '';
          this.form.cashFlowFileName = '';
          if (this.$refs.bankFile.uploadFiles.length > 0) {
            if (this.$refs.bankFile.uploadFiles[0].raw) {
              this.form['bankFile'] = this.$refs.bankFile.uploadFiles[0].raw;
              this.form.bankFileUrl = '';
            }
            this.form.bankFileName = this.$refs.bankFile.uploadFiles[0].name;
          }
          if (this.$refs.liabilitiesFile.uploadFiles.length > 0) {
            if (this.$refs.liabilitiesFile.uploadFiles[0].raw) {
              this.form['liabilitiesFile'] = this.$refs.liabilitiesFile.uploadFiles[0].raw;
              this.form.liabilitiesFileUrl = '';
            }
            this.form.liabilitiesFileName = this.$refs.liabilitiesFile.uploadFiles[0].name;
          }
          if (this.$refs.profitFile.uploadFiles.length > 0) {
            if (this.$refs.profitFile.uploadFiles[0].raw) {
              this.form['profitFile'] = this.$refs.profitFile.uploadFiles[0].raw;
              this.form.profitFileUrl = '';
            }
            this.form.profitFileName = this.$refs.profitFile.uploadFiles[0].name;
          }
          if (this.$refs.cashFlowFile.uploadFiles.length > 0) {
            if (this.$refs.cashFlowFile.uploadFiles[0].raw) {
              this.form['cashFlowFile'] = this.$refs.cashFlowFile.uploadFiles[0].raw;
              this.form.cashFlowFileUrl = '';
            }
            this.form.cashFlowFileName = this.$refs.cashFlowFile.uploadFiles[0].name;
          }
          if (isCheck) {
            this.$refs['form'].validate((valid) => {
              if (valid) {
                resolve({
                  data: this.form,
                  check: true
                });
              } else {
                resolve({
                  data: this.form,
                  check: false
                });
              }
            });
          } else {
            resolve({
              data: this.form,
              check: true
            });
          }
        });
      }
    }
  }

</script>
